<template>
  <div class="container">
    <!--    头部搜索区域-->
    <div class="notice-hd">
      <el-form :model="searchForm" inline class="hd-left">
        <el-form-item>
          <el-input
            v-model="searchForm.title"
            style="width: 200px"
            placeholder="请输入公告标题"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="searchForm.status"
            style="width: 150px"
            class="m-2"
            placeholder="请选择公告状态"
            size="small"
          >
            <el-option
              v-for="item in stateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            style="width: 150px"
            v-model="searchForm.startTime"
            type="datetime"
            placeholder="开始时间"
            size="small"
            value-format="YYYY-MM-DD"
          />
          <el-date-picker
            style="width: 150px; margin-left: 10px"
            v-model="searchForm.endTime"
            type="datetime"
            placeholder="结束时间"
            size="small"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <TsButton
            @click="search"
            type="primary"
            size="small"
            icon="el-icon-search"
            perms="announcement:editList:get"
            label="搜索"
          ></TsButton>
          <el-button @click="reset" size="small">重置</el-button>
        </el-form-item>
      </el-form>
      <!--      右侧按钮区域-->
      <div class="hd-right">
        <TsButton
          type="primary"
          size="small"
          @click="add"
          perms="announcement:add:post"
          label="新增"
        ></TsButton>
        <TsButton
          perms="announcement:publish:post"
          type="success"
          size="small"
          @click="noticePublish"
          label="批量发布"
        ></TsButton>
        <TsButton
          perms="announcement:unpublish:post"
          type="info"
          size="small"
          label="取消发布"
          @click="cancelPublish"
        ></TsButton>
        <TsButton
          perms="announcement:delete:delete"
          type="danger"
          size="small"
          label="批量删除"
          @click="multipleDel"
        ></TsButton>
      </div>
    </div>
    <!--    表格区域-->
    <div class="table" style="height: calc(100% - 160px); overflow-y: auto">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        :header-cell-style="{ background: '#FEF6F6' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          width="200"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="publishTime" label="发布日期" width="120">
        </el-table-column>
        <el-table-column prop="status" label="发布状态" width="120">
          <template #default="scope">
            <el-tag
              type="success"
              size="small"
              v-show="scope.row.status === '1'"
              >已发布</el-tag
            >
            <el-tag
              type="warning"
              size="small"
              v-show="scope.row.status === '0'"
              >未发布</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="通知范围" show-overflow-tooltip>
          <template #default="scope">
            <el-tag
              size="small"
              style="margin-right: 5px"
              v-for="item in scope.row.scope"
              :key="item.id"
              >{{ item.name }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="240px">
          <template #default="scope">
            <TsButton
              perms="announcement:edit:$id:get"
              type="text"
              size="mini"
              label="详情"
              @click="detail(scope.row.id)"
            ></TsButton>
            <TsButton
              perms="announcement:edit:$id:get"
              style="color: #909399"
              type="text"
              size="mini"
              v-show="scope.row.status !== '0'"
              @click="cancel(scope.row.id)"
              label="取消发布"
            ></TsButton>
            <TsButton
              perms="announcement:publish:post"
              style="color: #67c23a"
              type="text"
              size="mini"
              label="发布"
              v-show="scope.row.status !== '1'"
              @click="onePublish(scope.row.id)"
            ></TsButton>
            <TsButton
              perms="announcement:update:post"
              style="color: #e6a23c"
              type="text"
              size="mini"
              label="修改"
              v-show="scope.row.status !== '1'"
              @click="update(scope.row.id)"
            ></TsButton>
            <TsButton
              perms="announcement:delete:delete"
              style="color: #f56c6c"
              type="text"
              size="mini"
              @click="del(scope.row.id)"
              label="删除"
            ></TsButton>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    分页区域-->
    <el-pagination
      style="float: right; margin: 20px"
      background
      v-model:currentPage="pageNum"
      v-model:page-size="pageSize"
      layout=" prev, pager, next"
      :total="totalNum"
      @size-change="pageSizeChange"
      @current-change="pageCurrentChange"
    />
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { notice, publish, unpublish, delpublish } from "@/api/message/notice";
import commonPageRepository from "@/composables/common-page-repository";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const searchForm = ref({});
//选择公告状态下拉选择框
const stateOptions = ref([
  {
    value: 1,
    label: "已发布",
  },
  {
    value: 0,
    label: "未发布",
  },
]);
//表格数据
const tableData = ref([]);
//分页查询数据
const pageNum = ref(1);
const pageSize = ref(50);
const totalNum = ref(0);
// 获取通知公告分页数据
function getNotice() {
  notice({
    pageNumber: pageNum.value,
    pageSize: pageSize.value,
  }).then((res) => {
    totalNum.value = res.data.totalElements;
    tableData.value = res.data.content;
  });
}
//改变分页事件
const { pageSizeChange, pageCurrentChange } = commonPageRepository(
  pageNum,
  pageSize,
  getNotice
);
//顶部搜索事件
function search() {
  notice({
    title: searchForm.value.title,
    startTime: searchForm.value.startTime,
    endTime: searchForm.value.endTime,
    pageNumber: pageNum.value,
    pageSize: pageSize.value,
    status: searchForm.value.status,
  }).then((res) => {
    totalNum.value = res.data.totalElements;
    tableData.value = res.data.content;
  });
}
//顶部重置事件
function reset() {
  searchForm.value = {};
  getNotice();
}
//新增通知公告
const router = useRouter();
function add() {
  router.push({ name: "noticeAdd" });
}
//多选数据
const multipleData = ref([]);
//多选事件
function handleSelectionChange(val) {
  multipleData.value = val;
}
//批量发布
function noticePublish() {
  if (multipleData.value.length === 0) {
    ElMessage.warning("请选择数据后再操作");
    return;
  }
  publish(multipleData.value.map((item) => item.id)).then((res) => {
    if (res.code === 200) {
      ElMessage.success("批量发布成功");
      getNotice();
    }
  });
}
//单条发布
function onePublish(id) {
  multipleData.value.push(id);
  publish(multipleData.value).then((res) => {
    if (res.code === 200) {
      ElMessage.success("发布成功");
      getNotice();
      multipleData.value = [];
    }
  });
}
//取消批量发布
function cancelPublish() {
  if (multipleData.value.length === 0) {
    ElMessage.warning("请选择数据后再操作");
    return;
  }
  unpublish(multipleData.value.map((item) => item.id)).then((res) => {
    if (res.code === 200) {
      ElMessage.success("取消成功");
      getNotice();
    }
  });
}
//单条取消发布
function cancel(id) {
  multipleData.value.push(id);
  unpublish(multipleData.value).then((res) => {
    if (res.code === 200) {
      ElMessage.success("取消成功");
      multipleData.value = [];
      getNotice();
    }
  });
}
//批量删除
function multipleDel() {
  if (multipleData.value.length === 0) {
    ElMessage.warning("请选择数据后再操作");
    return;
  }
  delpublish(multipleData.value.map((item) => item.id)).then((res) => {
    if (res.code === 200) {
      ElMessage.success("删除成功");
      getNotice();
    }
  });
}
//单条删除
function del(id) {
  multipleData.value.push(id);
  delpublish(multipleData.value).then((res) => {
    if (res.code === 200) {
      ElMessage.success("删除成功");
      getNotice();
      multipleData.value = [];
    }
  });
}
//跳转到详情页面
function detail(id) {
  router.push({
    name: "noticeDetail",
    query: {
      id,
    },
  });
}
//跳转到修改页面
function update(id) {
  router.push({ name: "noticeAdd", query: { id } });
}
onMounted(() => {
  getNotice();
});
</script>

<style scoped lang="scss">
.container {
  height: calc(100vh - 220px);
  background: #ffffff;
  box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);
  border-radius: 6px;
  padding: 20px;
  overflow-y: auto;
  .notice-hd {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .hd-right {
    margin-top: -20px;
  }
}
</style>
